<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .first{
            width: 400px;
            height: 400px;
            background-color: red;
        }

        .second {
            width: 300px;
            height: 300px;
            background-color: blue;
        }

        .third {
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div id="first" class="first">
        <div id="second" class="second">
            <div id="third" class="third"></div>
        </div>
    </div>
    <script>
        /*
        
            事件流：分为事件冒泡流和事件捕获流 顺序是 事件捕获=>事件（目标）对象=>事件冒泡

            事件冒泡： 事件从最具体的元素走向最不具体的元素 third => second => first => body

            事件捕获： 事件从最不具体的元素走向最具体的元素 body=>first => second=>third
        
        */

        // function thirdClick() {
        //     console.log('这是div3')
        // }

        // function secondClick() {
        //     console.log('这是div2')
        // }

        // function firstClick() {
        //     console.log('这是div1')
        // }
            var first = document.getElementById('first')
            var second = document.getElementById('second')
            var third = document.getElementById('third')
        first.addEventListener('click', function() {
            console.log('这是第一个div')
        }, true)

        second.addEventListener('click', function() {
            console.log('这是第二个div')
        }, true)

        third.addEventListener('click', function() {
            console.log('这是第三个div')
        }, true)

    </script>
</body>
</html>